<template>
  <div id="main">
    <!-- 数据展示栏 -->
    <ul class="DataColumn">
      <li>
        <div class="Item-icon"></div>
        <div>
          <span class="price">￥00.0</span>
          <span class="fontsize12">今日收益</span>
        </div>
      </li>
      <li></li>
      <li></li>
    </ul>
    <!-- 点单平台类型数据展示 -->
    <div class="echartsContentBox">
      <div class="leftItem">
        <div class="rankingsBox">
          <span class="itemTitle">昨日产品销量排行前三</span>
          <div class="rankingsItem">
            <span>top1</span>
            <div></div>
            <span>原味芝士巧克力</span>
          </div>
          <div class="rankingsItem">
            <span>top2</span>
            <div></div>
            <span>轻芝士茗茶</span>
          </div>
          <div class="rankingsItem">
            <span>top3</span>
            <div></div>
            <span>抹茶拿铁</span>
          </div>
        </div>
        <div class="echartsBox"></div>
      </div>
      <div class="rightItem">
        <span class="itemTitle">点餐方式数据</span>
        <div class="echart" id="mychart" :style="myChartStyle"></div>
      </div>
    </div>
    <!-- 折线图 -->
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      // opinionDataMonth: [
      //   "155",
      //   "1200",
      //   "900",
      //   "800",
      //   "300",
      //   "900",
      //   "270",
      //   "120",
      //   "450",
      //   "600",
      //   "900",
      //   "1200",
      // ], //月数据
      optionDataMonth: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      xData: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ], //横坐标
      mData: [0, 0, 0, 0, 0, 0, 0], //美团
      eDate: [0, 0, 0, 0, 0, 0, 0], //饿了么
      tDate: [0, 0, 0, 0, 0, 0, 0], //堂食
      myChartStyle: { width: "100%", height: "500px" }, //图表样式
    };
  },
  methods: {
    drawLine() {
      this.charts = echarts.init(document.querySelector(".echartsBox"));
      this.charts.setOption({
        title: {
          left: "3%",
          top: "5%",
          text: "年订单数", //标题文本，支持使用 \n 换行。
        },
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   align: "right", //文字在前图标在后
        //   left: "3%",
        //   top: "15%",
        //   data: ["近一周"],
        // },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}, //保存为图片
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true, //保证刻度线和标签对齐
          },
          //x坐标的名称
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          boundaryGap: true,
          splitNumber: 4, //纵坐标数
          interval: 250, //强制设置坐标轴分割间隔
        },

        series: [
          {
            name: "近一月",
            type: "line", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            areaStyle: {
              //显示区域颜色---渐变效果
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255,200,213)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              color: "rgb(255,96,64)", //改变折线点的颜色
              lineStyle: {
                color: "rgb(255,96,64)", //改变折线颜色
              },
            },
            data: this.opinionDataMonth,
          },
        ],
      });
    },
    initEcharts() {
      const mulColumnZZTData = {
        xAxis: {
          data: this.xData,
        },
        // 图例
        legend: {
          data: ["美团", "饿了么", "堂食"],
          top: "0%",
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.mData,
            name: "美团", // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top",
            },
          },
          {
            type: "bar", //形状为柱状图
            data: this.eDate,
            name: "饿了么", // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top",
            },
          },
          {
            type: "bar", //形状为柱状图
            data: this.tDate,
            name: "堂食", // legend属性
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top",
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine("main");
    });
    this.initEcharts();
  },
};
</script>

<style scope>
@import "../../../assets/css/DataModule.css";
</style>
